<template>
  <div class="message-list">
      <div class="warpper">
        <div class="list-content" v-for="item in tableData">
          <div class="content">
            <div class="content-left">
                <div class="title"><label :class="{'font-style': item.handler !== null}">{{item.type}}&nbsp&nbsp&nbsp&nbsp&nbsp</label><label :class="{'font-style': item.handler !== null}">{{item.createTime}}</label></div>
                <div class="content-text"><label :class="{'font-style': item.handler !== null}">{{item.title}}</label></div>
            </div>
            <div class="content-right">
                <div class="deal-content">
                    <el-button type="text" @click="messageState(item.id)" v-if="item.handler === null">未处理</el-button>
                    <label :class="{'font-style': item.handler !== null}" v-if="item.handler !== null">处理人: </label><label :class="{'font-style': item.handler !== null}">{{item.handler}}</label><br />
                    <label :class="{'font-style': item.handler !== null}" v-if="item.handler !== null">{{item.handlingTime}}</label>
                </div>
                <div class="time"></div>
            </div>
          </div>
        </div>
      </div>
      <el-form-item style="margin-top: 20px;">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="sendData.pageNo"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="sendData.pageSize"
              layout="total, prev , pager , next, sizes, jumper"
              :total="sendData.total">
          </el-pagination>    
      </el-form-item>  
  </div>
</template>
<script>
import { getMessageList, setMessageState, messageCount } from '../../public/js/message'
export default {
  data () {
    return {
      tableData: [],
      ids: [],
      sendData: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  created () {
    this.getMessageLists(this.sendData)
  },
  mounted () {
    window.bus.$on('backData', res => {
      this.tableData = res.messageEntities
      this.total = res.total
    })
  },
  methods: {
    getMessageLists () {
      getMessageList(this.sendData).then(res => {
        this.tableData = res.data.messageEntities
        this.sendData.total = res.data.total
        window.bus.$emit('allRead', {sendData: this.sendData, data: res.data.messageEntities})
      })
    },
    messageState (id) {
      this.ids = []
      this.ids.push(id)
      setMessageState(this.sendData, this.ids).then(res => {
        if (res.data.errCode === 0) {
          this.$message.success('处理成功')
          this.tableData = res.data.messageEntities
          messageCount().then(res => {
            if (res.data.errCode === 0) window.bus.$emit('messageCount', res.data.count)
          })
        }
      })
    },
    handleSizeChange (val) {
      this.sendData.pageSize = val
      this.getMessageLists(this.sendData)
    },
    handleCurrentChange (val) {
      this.sendData.pageNum = val
      this.getMessageLists(this.sendData)
    }
  }
}
</script>
<style lang="scss">
  .message-list {
      .warpper {
        max-height: 550px;
        overflow: auto;
          .list-content {
              border-bottom: 1px solid #cdd9e6;
              .content {
                overflow: hidden;
                padding: 10px 20px;
              }
              .content-left, .content-right {
                  float: left;
                  width: 50%;
                  line-height: 2;
                  label, button {
                      font-size: 12px;
                  }
              }
              .content-left {
                  text-align: left;
              }
              .content-right {
                  text-align: right;
              }
          }
      }
      .font-style {
          color: rgb(182, 192, 201);
      }
  }
</style>
